import Vue from "vue";
import Vuex from "vuex";
import request from "@/http/request";
import { Notification } from "element-ui";

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    token: window.sessionStorage.getItem("token"),
    userInfo: null,
  },
  mutations: {
    setToken(state, token) {
      state.token = token;
      window.sessionStorage.setItem("token", token);
    },
    removeToken(state) {
      state.token = "";
      state.userInfo = null;
      window.sessionStorage.removeItem("token");
    },
    setUserInfo(state, userInfo) {
      state.userInfo = userInfo;
    },
    setBlogInfo(state, blogInfo) {
      state.blogInfo = blogInfo;
    },
  },
  // vuex 中 Action 类似于 mutation，但是 Action 可以包含任意异步操作。
  actions: {
    getBlogInfo({ commit }) {
      request
        .getBlogInfo()
        .then((res) => {
          if (res.code === 0) {
            commit("setBlogInfo", res.data);
          } else { //单独导入 Notification 来实现消息提示的功能
            Notification.error({
              title: "提示",
              message: res.msg,
            });
          }
        })
        .catch((err) => {
          console.log(err);
          Notification.error({
            title: "提示",
            message: "服务器繁忙，获取博客信息失败。",
          });
        });
    },
  },
});

export default store;
